<template>
	<view>
		<!-- 头部信息 -->
		<view class="header">
			<image :src="bgImg"></image>
			<view class="userInfo">
				<view class="flex_center">
					<view class="head">
						<image :src="head"></image>
					</view>
					<view class="ml_20">
						<view>{{name}}</view>
						<view class="vip">
							<image :src="gradeImg"></image>
							<view class="grade">LV.{{grade}}</view>
						</view>
					</view>
				</view>
				<view class="calendar">
					<image src="../../static/icon_rili2x.png"></image>学习日历
				</view>
			</view>

			<view class="study_nav">
				<navigator url="" v-for="(count, index) in counts" :key="index">
					<view><text>{{count.num}}</text>{{count.unit}}</view>
					<view class="fs_22 color_8E">{{count.title}}</view>
				</navigator>
			</view>

			<!-- tab -->
			<scroll-view scroll-x="true" class="tabs" @click="tabFun">
				<view :class="tabArr.curHdIndex=='0'? 'active' : ''" id="tab-hd01" data-id="0">全部课程</view>
				<view :class="tabArr.curHdIndex=='1'? 'active' : ''" id="tab-hd02" data-id="1">最近学习</view>
				<view :class="tabArr.curHdIndex=='2'? 'active' : ''" id="tab-hd03" data-id="2">预约直播</view>
				<view :class="tabArr.curHdIndex=='3'? 'active' : ''" id="tab-hd04" data-id="3">直播回放</view>
			</scroll-view>
		</view>

		<view class="tabContent">
			<!-- 全部课程 -->
			<view class="tabCont-item" :class="tabArr.curBdIndex=='0'? 'active' : ''">
				<view class="courseList" v-for="(course, index) in courses" :key="index">
					<view class="courseImg">
						<image :src="course.src"></image>
					</view>
					<view class="ml_20 width">
						<view>{{course.title}}</view>
						<view class="js">讲师：{{course.name}}</view>
						<view class="ks">
							<view class="fs_24">课时<text class="color_8E">{{course.classHour}}节</text></view>
							<image v-if="course.progress >= 100"  src="../../static/icon_tick2x.png"></image>
							<view v-else class="fs_22 color_8E">{{course.progress}}%</view>
						</view>
						<progress :percent="course.progress" border-radius="20" activeColor="#1F7AFF" />
					</view>
				</view>
			</view>
			<view class="tabCont-item" :class="tabArr.curBdIndex=='1'? 'active' : ''">222</view>
			<view class="tabCont-item" :class="tabArr.curBdIndex=='2'? 'active' : ''">333</view>
			<view class="tabCont-item" :class="tabArr.curBdIndex=='3'? 'active' : ''">444</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgImg: '../../static/background.png',
				head: '../../static/Candy2x.png',
				name: 'Candy',
				gradeImg: '../../static/vip12x.png',
				grade: 1,
				counts: [
					{
						num: 36,
						unit: '分钟',
						title: '今日学习'
					},
					{
						num: 36,
						unit: '天',
						title: '坚持学习'
					},
					{
						num: 36,
						unit: '天',
						title: '累计学习'
					}
				],
				// tab
				tabArr: {
					curHdIndex: 0,
					curBdIndex: 0
				},
				courses: [
					{
						src: '../../static/img_012.png',
						title: '高三数学特训营',
						name: 'candy',
						classHour: 36,
						progress: 80
					},
					{
						src: '../../static/img_012.png',
						title: '高三数学特训营',
						name: 'candy',
						classHour: 24,
						progress: 60
					},
					{
						src: '../../static/img_012.png',
						title: '高三数学特训营',
						name: 'candy',
						classHour: 36,
						progress: 100
					}
				]
			};
		},
		methods: {
			// tab
			tabFun: function(e) {
				//获取触发事件组件的dataset属性  
				var _datasetId = e.target.dataset.id;
				// console.log("----" + _datasetId + "----");
				var _obj = {};
				_obj.curHdIndex = _datasetId;
				_obj.curBdIndex = _datasetId;
				this.tabArr = _obj
			}
		}
	}
</script>

<style lang="scss">
	// 头部信息
	.header {
		position: relative;
		background-color: #fff;
	}

	.header>image {
		width: 100%;
		height: 280rpx;
		position: absolute;
		z-index: 0;
	}

	.userInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		color: #fff;
	}

	.userInfo>view {
		z-index: 9;
	}

	.head image {
		width: 90rpx;
		height: 90rpx;
	}

	.vip {
		position: relative;
		margin-top: 10rpx;
	}

	.vip image {
		width: 95rpx;
		height: 34rpx;
	}

	.grade {
		position: absolute;
		top: 0;
		left: 35rpx;
		font-size: 24rpx;
		font-style: italic;
	}

	.calendar {
		background-color: #3D53F1;
		padding: 15rpx 30rpx;
		border-radius: 70rpx;
	}

	.calendar image {
		width: 34rpx;
		height: 38rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}

	.study_nav {
		display: flex;
		background: #fff;
		margin: 0 30rpx;
		text-align: center;
		border-radius: 10rpx;
		padding: 30rpx;
		box-shadow: 0 10rpx 10rpx -10rpx #ddd;
		z-index: 9;
		position: relative;
	}

	.study_nav navigator {
		flex: 1;
	}

	.study_nav navigator text {
		font-size: 42rpx;
	}

	/* tab */
	.tabs {
		display: flex;
		padding: 30rpx 0;
		white-space: nowrap;
	}

	.tabs view {
		display: inline-block;
		color: #686868;
		text-align: center;
		font-size: 28rpx;
		padding: 15rpx 30rpx;
		margin-left: 30rpx;
		background-color: #F7F7F7;
		border-radius: 66rpx;
	}

	.tabs .active {
		color: #fff;
		background-color: #427FFD;
	}

	.tabContent {
		margin: 15rpx 30rpx;
	}

	.tabContent .tabCont-item {
		display: none;
	}

	.tabContent .tabCont-item.active {
		display: block;
	}
	// 全部课程
	.courseList {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
		display: flex;
		margin-bottom: 20rpx;
	}

	.courseImg image {
		width: 220rpx;
		height: 162rpx;
	}

	.js {
		color: #F88C0F;
		margin-top: 10rpx;
		font-size: 26rpx;
	}

	.ks {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}

	.ks image {
		width: 22rpx;
		height: 22rpx;
	}
</style>
